<template>
  <div class="hp_top-bar">
    <div class="hp_main-bar">
      <div class="hp_blog_log">何</div>
      <div class="hp_blog_name">何平blog</div>
      <span @click="link('/')" :class="{'hp_bar_item-sl': $route.path == '/' }" class="hp_bar_item cursor">首页</span>
      <span @click="link('/about')" :class="{'hp_bar_item-sl': $route.path == '/about' }" class="hp_bar_item cursor">关于</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-bar',
  methods: {
    link (path) {
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.hp_top-bar {
  background-color #303643
  color rgba(255,255,255,0.8)
  position fixed
  left 0
  top 0
  width 100vw
  height 46px
  display flex
  align-items center
  justify-content center
  font-size 16px
  .hp_main-bar {
    width 920px
    display flex
    align-items center
    .hp_blog_log {
      background-color white
      color black
      border-radius 50%
      width 30px
      height 30px
      font-family '黑体'
      font-weight 500
      display flex
      align-items center
      justify-content center
      font-size 20px
    }
    .hp_blog_name {
      color white
      font-size 16px
      margin-left 5px
    }
    .hp_bar_item {
      color rgba(255,255,255,0.8)
      padding-left 20px
      padding-right 20px
    }
    .hp_bar_item:hover {
      color rgba(255,255,255,1)
    }
    .hp_bar_item-sl {
      color rgba(255,255,255,1)
    }
  }
}
</style>
